<template>
  <div style="width: 100%;height: 100%">
    <returnActionList></returnActionList>

    <div style="width: 100%" class="fd itemcenter">
      <div class="bc-w" style="width: 70%" >
        <div style="margin:10px">
          <div class="fr center m-t ">
            <el-date-picker
              v-model="pickValue"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions2">
            </el-date-picker>
            <el-button type="primary" @click="setTime" class="ml50">搜索</el-button>
          </div>

            <div class=" color-bl " style="height: 10px;margin-top:10px"> </div>

            <div class=" fs20 c-o">综合统计</div>
            <div class=" color-bl " style="height: 5px;margin-top: 5px;margin-bottom: 5px"> </div>
            <div class=" m-t10 fs18">
              <div class="m-t10">
                <span>设备总数：{{statistics.equipmentNum}}</span>
              </div>
              <div class="fr  m-t10">
                <div class="f1">订单总额：<span class="c-r">{{statistics.orderMoneySum}}元</span></div>
                <div class="f1">订单数:<span class="c-o">{{statistics.orderNum}}单</span></div>
              </div>

              <div class="fr  m-t10">
                <div class="f1">未退押金：<span class="c-r">{{statistics.noBackGuarantee}}元</span></div>
                <div class="f1">未退押金数量:<span class="c-o">{{statistics.noBackGuaranteeNum}}单</span></div>
              </div>

            </div>
            <div class=" color-bl " style="height: 10px;margin-top:10px"> </div>
            <div>
              <div class="f-t ">{{this.$store.getters.getOrganizationList[this.$store.getters.getUserPresentOrganization].organizationName}}</div>
              <div class=" color-bl " style="height: 5px;margin-top: 5px;margin-bottom: 5px"> </div>
              <div class="fs18 ">
                <div class="fr between m-t10">
                  <div class="f1">使用设备：<span>{{statistics.useEquipmentNum}}张</span></div>
                  <div class="f1">设备总数:<span>{{statistics.equipmentNum}}张</span></div>
                </div>

                <div class="fr between m-t10">
                  <div class="f1">订单总额：<span class="c-r">{{statistics.orderMoneySum}}元</span></div>
                  <div class="f1">订单数:<span class="c-o">{{statistics.orderNum}}单</span></div>
                </div>

              </div>

              <div class="">
                <div class=" color-bl " style="height: 5px;margin-top: 5px;margin-bottom: 5px"> </div>
                <div class="fr fs18 between m-t10">
                  <div class="f1"> 中午总额：<span class="c-r">{{statistics.nonMoney}}</span></div>
                  <div class="f1">中午数量:<span class="c-o">{{statistics.nonNun}}单</span></div>
                </div>
                <div class="fr fs18 between m-t10">
                  <div class="f1">晚上总额：<span class="c-r">{{statistics.nightMoey}}元</span></div>
                  <div class="f1">晚上数量:<span class="c-o">{{statistics.nightNum}}单</span></div>
                </div>
                <div class="fr fs18 between m-t10">
                  <div class="f1">连续总额：<span class="c-r">{{statistics.continuousMoney}}元</span></div>
                  <div class="f1">连续数量:<span class="c-o">{{statistics.nightNum}}单</span></div>
                </div>
              </div>
            </div>




        </div>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: "OrdersStatistics",

    data() {
      return {
        statistics: {
          equipmentNum: '1000',
          orderMoneySum: '10000',
          orderNum: '1000',
          noBackGuarantee: '100',
          noBackGuaranteeNum: '10',

          useEquipmentNum: '100',
          nonMoney: '888',
          nonNun:'100',
          nightMoey:'8888',
          nightNum:'100',
          continuousMoney:'88888',
          continuousNum:'1000',
    },
      pickValue:[new Date(2017, 7, 1), new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1)],
        pickerOptions2
    :
      {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一年',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
            picker.$emit('pick', [start, end]);
          }
        }
        ]
      }
    ,


    }
    },
    methods: {
      selectOrder: function () {
        console.log(this.value)
      },
      deleteRow: function (index, rows) {
        console.log(index, rows[index])
      },
      setTime: function () {
        console.log('pickValue', this.pickValue)
      }
    }
  }
</script>

<style>
.m-t{
  margin-top: 15px;
}
</style>
